<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_jquery中$post形式完成异步请求</title>
</head>
<body>
    <h2>用户注册</h2>
    用户名:<input id="username" type="text" name="username" onblur="sendAjax()" /><br/>
    <span id="info" style="color: red"></span><br/>
    测试:<input type="text"/>
</body>
    <!--发起异步请求
      需求 模拟百度注册 用户名提示
          当录入完用户名，当失去焦点之后
          悄悄给服务器发起一个请求  请求就是校验用户名是否存在的。
          如果存在 就把响应回来的提示信息展示到 span标签中
           实现
             1:给页面标签添加一个 失去焦点事件
             2:事件触发函数
              3:函数中完成 发起异步请求
              4: 响应回来的数据要回显到span中
    -->
<!--先引入 jquery的js文件-->
<script src="jquery-3.2.1.min.js"></script>
<script>
       function sendAjax(){

         /*
         $.post(url,data,function,type);
         $.get(url,data,function,type);
         上面这两个方法的底层是 $.ajax()

         $.post  $.get是上层函数---自动挡
               代码简单，控制内容少
         $.ajax 叫底层函数  --- 手动挡
               代码复杂，控制内容多

               我们后端人员 都要认识
               前端人员 会用$.ajax()
               现在开发过程中使用框架中的调用语句
           老师讲几个常见的参数
                 url:服务器请求地址
                 async:异步请求或者同步请求 true 异步 false同步
                          不写默认也是异步
                 data:请求到服务器的参数--请求参数
                 dataType:上啊面的type,期望返回的数据类型
                          默认是text  可以设置为json
                 success:响应成功函数
                 error:响应失败函数
                 type:请求方式
            $.ajax({
               键值对
            })

          */
         var username = $("#username").val();
         //这是采用jquery的语法获取标签中的value属性
         var url = "/day09/jQueryAjax";
         var data = "username="+username;

         $.ajax({
             url:url,
             async:true,
             type:"get",
             data:data,
             dataType:"text",
             success:function(data){
                 console.log("响应成功");
                 //将响应内容设置到 info中
                 $("#info").html(data);
             },
             error:function(){
                 console.log("操作失败")
             }

         });
       }

</script>
</html>